<script setup>
import { onMounted,ref } from 'vue';
import {get} from '../../api/http'

const logList = ref([])
const pageNum = ref(1)
const keyword = ref('')
const total = ref(0)
const loading = ref(false)

const getLogList = () => {
    loading.value = true
    get('log/list',{keyword:keyword.value, pageNum: pageNum.value, pageSize:10}).then(res=>{
        logList.value = res.data.list
        total.value = res.data.total
        loading.value = false
    })
}

const goPage = (currentPageNum) => {
    pageNum.value = currentPageNum;
    getLogList();
}

onMounted(()=>{
    getLogList();
})

</script>
<template>
    <main v-blog-title data-title="系统日志">
        <div class="toolBar">
            <el-input v-model="keyword" style="width:300px" @input="getLogList" clearable placeholder="关键字搜索"></el-input>
        </div>
        <div class="content" v-loading="loading">
            <el-table :data="logList" border>
                <el-table-column label="日志描述" prop="logDescribe"></el-table-column>
                <el-table-column label="接口" prop="logApi"></el-table-column>
                <el-table-column label="请求用户" prop="reqUsername"></el-table-column>
                <!-- <el-table-column label="请求参数"></el-table-column> -->
                <el-table-column label="IP" prop="ipAddress"></el-table-column>
                <!-- <el-table-column label="IP归属地" prop="ipAddressLocal"></el-table-column> -->
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
            </el-table>
            <el-pagination style="margin: 10px" small :total="total" @current-change="goPage" background hide-on-single-page></el-pagination>
        </div>
    </main>
</template>
<style scoped>
main{
    margin: 10px;
}
.toolBar{
    margin: 10px 0;
}
</style>